<template>
  <div id="olmap" ref="olmap" style="width: 100%; height: 100%;">
    <el-row :gutter="20">
      <el-col :span="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
      <el-col :span="6" :offset="6">
        <div class="grid-content bg-purple"></div>
      </el-col>
    </el-row>

    <el-row class="opebutton">
      <el-select  class="mapselect" v-model="value" placeholder="时间选择" style="width:200px;margin-right: 200px;margin-top: 24px" @change="changeTime(value)">
        <el-option-group v-for="group in options" :key="group.label"  >
          <el-option
            :label="group.label"
            :value="group.value"
          ></el-option>
        </el-option-group>
      </el-select>
      <el-button type="primary" @click="showReport()" style="margin-right: 80px;margin-top: 24px" >查看报告</el-button>
    </el-row>

    <!-- <el-checkbox class="isedit" v-model="checked">启用WFS编辑</el-checkbox> -->
    <el-dialog title="预警报告" :visible.sync="reportVisiable">
      <le-preview ref="md-preview" :is-md="true" :value="mdContent" :hljs-css="hljsCss"></le-preview>
      <div slot="footer" class="dialog-footer">
        <el-button @click="reportVisiable = false">关闭</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import 'ol-layerswitcher/dist/ol-layerswitcher.css'
import Map from 'ol/Map'
import View from 'ol/View'
import { Draw, Modify, Snap, Select} from 'ol/interaction'

import { Tile as TileLayer, Vector as VectorLayer } from 'ol/layer'
import LayerGroup from "ol/layer/Group"
import { OSM, TileArcGISRest, Vector as VectorSource ,Stamen,TileWMS} from 'ol/source'
import { Circle as CircleStyle, Fill, Stroke, Style } from 'ol/style'
import axios from 'axios';
import XYZ from 'ol/source/XYZ'
import { transform } from 'ol/proj'
import LayerSwitcher from 'ol-layerswitcher'
import mapSources from './modules/maplist'
export default {
  components: {},
  data() {
    return {
      checked: false,
      geometryType: [
        {
          value: 'Point',
          label: 'Point'
        },
        {
          value: 'LineString',
          label: 'LineString'
        },
        {
          value: 'Polygon',
          label: 'Polygon'
        },
        {
          value: 'Circle',
          label: 'Circle'
        }
      ],
      options: [
        {label:'2021-11-20',value:'2021-11-20'},
        {label:'2021-11-21',value:'2021-11-21'}
      ],
      value: '2021-11-20',
      reportVisiable: false,
      hljsCss: 'agate',
      mdContent: '#预警报告#',
      proj: 'EPSG:4326', //定义wgs84地图坐标系
      proj_m: 'EPSG:3857', //定义墨卡托地图坐标系
      map: null,
      mapLayer: null,
      mapLayerlabel: null,
      source: null,
      vector: null,
      draw: null,
      snap: null
    }
  },
  created() {
    //this.createMap()
  },
  mounted() {
    this.initMap()
  },
  methods: {
    initMap: function() {
      //初始化map对象
      this.map = new Map({
        target: 'olmap',
        projection: this.proj,
        //interactions: ol.interaction.defaults().extend([mapDragInteraction]),
        view: new View({
          center: [11689924.1894343,4381271.386187017],
          zoom: 4.70
        }),
        layers:[
          new LayerGroup({
            title: '温度图层',
            fold: 'open',
            layers: [
              new TileLayer({
                title: '栅格未裁剪',
                visible: true,
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:tmin_china',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 73.50340896 + "," + 3.763998000000008
                  }
                })
              }),
              new TileLayer({
                title: '温度等值面',
                visible: true,
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:tmin_polygon_intersection',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 73.50340896 + "," + 3.763998000000008
                  }
                })
              }),
              new TileLayer({
                title: '气象站点',
                visible: true,
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:tmin_station',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 75.70299530029297 + "," + 22.22024917602539
                  }
                })
              })
            ]
          }),
          new LayerGroup({
            title: '路网图层',
            fold: 'open',
            layers: [
              new TileLayer({
                title: '高速路网',
                visible: true,
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:highway_polyline',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 73.50340896 + "," + 3.763998000000008
                  }
                })
              }),
              new TileLayer({
                title: '高速路网_带温度属性',
                visible: true,
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:highway_polyline_intersection',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 73.50340896 + "," + 3.763998000000008
                  }
                })
              }),
              new TileLayer({
                title: '高速路网_预警',
                visible: true,
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:highway_polyline_intersection',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    'CQL_FILTER': " value <= 5 " ,
                    tilesOrigin: 73.50340896 + "," + 3.763998000000008
                  }
                })
              })
            ]
          }),
          new LayerGroup({
            title: '轮廓图',
            type: 'base',
            combine: true,
            visible: true,
            layers: [
              new TileLayer({
                source: new TileWMS({
                  url: 'http://172.17.0.148:8080/geoserver/cite/wms',
                  params: {
                    'FORMAT': 'image/png',
                    'VERSION': '1.1.1',
                    tiled: true,
                    "STYLES": '',
                    "LAYERS": 'cite:china_region',
                    "exceptions": 'application/vnd.ogc.se_inimage',
                    tilesOrigin: 73.50340896 + "," + 3.763998
                  }
                })
              })
            ]
          })
        ]
      })


      // 监听地图“moveend”事件
      this.map.on('moveend', function (event) {
        var view = event.target.getView();
        var center = view.getCenter(); // 获取地图中心点
        var zoom = view.getZoom(); // 获取当前缩放级别

        console.log('center:', center);
        console.log('zoom:', zoom);
      });



      // this.map.addLayer(layerGroup);


      const layerSwitcher = new LayerSwitcher({
        reverse: true,
        groupSelectStyle: 'group'
      });
      this.map.addControl(layerSwitcher);


      this.changeTime(this.value);
      // //初始化地图图层
      // this.mapLayer = new TileLayer({
      // 	source: this.tdtdz,
      // 	projection: this.proj
      // })
      //
      // //初始化标签图层
      // this.mapLayerlabel = new TileLayer({
      // 	source: this.tdtlabeldz,
      // 	projection: this.proj
      // })

      //将图层加载到地图对象
      // this.map.addLayer(this.mapLayer)
      // this.map.addLayer(this.mapLayerlabel)
    },
    /******************切换时间***************/
    changeTime: function(value) {
      this.value = value;
      this.map.getLayers().forEach(function(layer) {
        if(layer instanceof TileLayer){

        }else if(layer instanceof LayerGroup){
          layer.getLayers().forEach(function(sublayer) {
            if (sublayer.get('title') === '气象站点') {
              console.log('updateParams');
              sublayer.getSource().updateParams({
                'CQL_FILTER': 'report_date =' + value
              });
            }else if(sublayer.get('title') === '温度等值面'){
              console.log('updateParams');
              sublayer.getSource().updateParams({
                'CQL_FILTER': 'reportDate =' + value
              });
            }else if(sublayer.get('title') === '高速路网_带温度属性'){
              console.log('updateParams');
              sublayer.getSource().updateParams({
                'CQL_FILTER': 'reportdate =' + value
              });
            }else if(sublayer.get('title') === '高速路网_预警'){
              console.log('updateParams');
              sublayer.getSource().updateParams({
                'CQL_FILTER': ' value <= 5 and reportdate =' + value
              });
            }
          });
        }
      });
    },

    showReport: function (){
      let that = this;
      axios.get('http://127.0.0.1:8060/moyu/geo/report/getReport?reportDate='+this.value,{
        timeout: 30000
      })
        .then(response => {
          this.mdContent = '<h1>结冰预警</h1>';
          this.mdContent += '<h2>预警时间：'+that.value+'</h2>';
          this.mdContent += '<img src="http://127.0.0.1:8060/moyu/geo/report/image?file='+response.data.data.img+'">' ;
          this.mdContent += '<h3>受结冰影响的路段有</h3>';
          response.data.data.reportNames.forEach(function(element) {
            that.mdContent += '<li>'+element+'</li>'
          });
        })
        .catch(error => {
          console.log(error);
        });

      this.reportVisiable = true;
    },
    // modifyInteraction
    wfsEdit: function() {
      let modify = new Modify({
        source: this.source
      })
      this.map.addInteraction(modify)
    },

    addInteractions: function(value) {
      this.draw = new Draw({
        source: this.source,
        style: new Style({
          stroke: new Stroke({
            color: '#1E90FF',
            lineDash: [2,4,6,8],
            width: 2
          })
        }),
        type: value
      })
      this.map.addInteraction(this.draw)
      this.snap = new Snap({
        source: this.source
      })
      this.map.addInteraction(this.snap)
    },

    selectInteraction: function(){
      let select = new Select({
        source: this.source
      })
      this.map.addInteraction(select)
    },

    // 开始绘制
    startDraw: function() {
      this.source = new VectorSource()
      this.vector = new VectorLayer({
        source: this.source,
        style: new Style({
          fill: new Fill({
            color: 'rgba(30, 144, 255, 0.3)'
          }),
          stroke: new Stroke({
            color: '#1E90FF',
            width: 2
          })
        })
      })
      this.map.addLayer(this.vector)
      this.wfsEdit()
      this.addInteractions('Polygon')
    },
    // 结束绘制
    endDraw: function() {
      if (this.draw) {
        this.map.removeInteraction(this.draw)
        this.map.removeInteraction(this.snap)
      }
    },
    // 保存绘制
    saveDraw: function() {
      if (this.vector) {
        let features = this.source.getFeatures()
        if (features.length > 0) {
          for (var j = 0; j < features.length; j++) {
            // 将3857坐标转换为4326坐标
            // let geo = features[j].getGeometry().transform(this.proj_m, this.proj)
            let geo = features[j].getGeometry()
            console.log(geo)
            alert(geo)
          }
        }
      }
    },
    // 删除绘制
    delectDraw: function() {
      if (this.draw) {
        this.map.removeInteraction(this.draw)
        this.map.removeInteraction(this.snap)
      }
      if (this.vector) {
        this.vector.getSource().clear()
        this.map.removeLayer(this.vector)
      }
    },
    // 编辑绘制
    editDraw: function(){
      // this.selectInteraction()
    }
  }
}
</script>

<style scoped>
#olmap {
  position: relative;
  z-index: 1;
}
.mapselect {
  position: absolute;
  top: 3%;
  right: 2%;
  z-index: 2;
}
.geometryType {
  position: absolute;
  top: 3%;
  right: 16%;
  z-index: 2;
}
.opebutton {
  position: absolute;
  top: 3%;
  right: 20%;
  z-index: 2;
}
.isedit {
  position: absolute;
  top: 4%;
  right: 30%;
  z-index: 2;
}
</style>
